<template>
  <section>
    <el-row>
      <el-button @click="addAnnualTrend" size="mini" type="primary">新增年运</el-button>
    </el-row>
    <el-table :data="annualTrendList" stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="年运六气：">
              <el-button @click="setSixQi(props.row)" size="mini" :disabled="!props.row.edit">设置六气</el-button>
            </el-form-item>
            <el-form-item label="描述：">
              <el-input v-show="props.row.edit" size="small" v-model="props.row.description" :autosize="{minRows:2}" type="textarea"></el-input>
              <span v-show="!props.row.edit">{{props.row.description}}</span>
            </el-form-item>
            <el-form-item label="图片：">
              <el-input v-show="props.row.edit" size="mini" v-model="props.row.image"></el-input>
              <img :src="props.row.image" width="50%"/>
            </el-form-item>
            <el-form-item label="全年易患：">
              <el-input v-show="props.row.edit" size="small" v-model="props.row.data.ps" :autosize="{minRows:2}" type="textarea"></el-input>
              <span v-show="!props.row.edit">{{props.row.data.ps}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号"  width="100px"></el-table-column>
      <el-table-column prop="name" label="名称" width="250px">
        <template slot-scope="scope">
          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
          <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="时间段" >
        <template slot-scope="scope">
          <el-date-picker v-show="scope.row.edit" size="small" value-format="yyyy-MM-dd" unlink-panels v-model="selPeriod" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <span  v-show="!scope.row.edit" >
            {{timeFormatter(scope.row.start)}} 至 {{timeFormatter(scope.row.end)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
          <el-button @click='cancelBtn(scope.row)' size="small" v-if="scope.row.edit">取消</el-button>
          <el-button @click='del(scope)' size="small" v-if="!scope.row.edit">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="showSeiSixQi" v-if="currTrend">
      <el-form  label-width="80px">
        <el-form-item title="测试"></el-form-item>
        <el-form-item v-for="q in currTrend.data.sixQi" :key="q.code" :label="q.name+'之气'">
          <el-date-picker size="small" value-format="yyyy-MM-dd" unlink-panels v-model="q.period" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button @click="saveSixQi(sixQi)" type="primary" size="mini">保存</el-button>
        <el-button @click="cancelSixQi(sixQi)" type="danger" size="mini">取消</el-button>
      </el-row>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "annualHealthTrend",
    data() {
      return {
        annualTrendList:[],
        selPeriod:[],
        showSeiSixQi:false,
        sixQi:[
          {name:'初',code:'1'},
          {name:'二',code:'2'},
          {name:'三',code:'3'},
          {name:'四',code:'4'},
          {name:'五',code:'5'},
          {name:'终',code:'6'},
        ],
        currTrend:null
      }
    },
    created(){
      this.getAnnualTrendList()
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      timeFormatter(date){
        return DateFormat.format(date)
      },
      addAnnualTrend(){
        console.log(this.annualTrendList)
        //创建一个空白的，再进行编辑
        this.fetch({name:"createAnnualTrend",data:{name:'',description:''}})
          .then(res=>{
            console.log(res)
            res.edit = true
            this.annualTrendList.unshift(res)
            this.currTrend=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirm(row){
        console.log(row.edit)
        if(row.edit === undefined){
          Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          this.selPeriod=[this.timeFormatter(row.start),this.timeFormatter(row.end)]
          return
        }
        console.log(row)//需要把时间段分成start和end
        console.log(this.selPeriod)
        if(row.edit){
          row.start=this.selPeriod[0]
          row.end=this.selPeriod[1]
          this.loading=true
          console.log('保存的地方',row)
          this.updateAnnualTrend(row)
        }else {
          row.edit=true
        }
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(scope){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteAnnualTrend",data:{id:scope.row.id}})
              .then(res=>{
                this.loading=false
                this.annualTrendList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      updateAnnualTrend(row){
        console.log(row)
        this.fetch({name:"updateAnnualTrend",data:{...row}})
          .then(res=>{
            this.loading=false
            console.log(res)
            row.edit=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getAnnualTrendList(pageNo,key){
        this.fetch({name:"getAnnualTrendList",data:{page:pageNo?pageNo:0,key:key?key:''}})
          .then(res=>{
            console.log(res)
            this.annualTrendList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setSixQi(trend){
        console.log(trend)
        if(trend.data.sixQi === undefined){
          Vue.set(trend.data,'sixQi',this.sixQi)
        }
        this.currTrend=trend
        this.showSeiSixQi=true
      },
      saveSixQi(){
        console.log(this.currTrend)
        this.showSeiSixQi=false
      },
      cancelSixQi(){
        this.currTrend.data.sixQi=[]
        this.showSeiSixQi=false
      }
    }
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 50%;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
